SF Symbols符號
SF Symbols提供了數千個一致且高度可配置的符號，這些符號與San Francisco系統字型無縫整合，自動與所有權重和尺寸的文字對齊。
您可以在導航欄、工具欄、標籤欄、上下文選單以及文字中使用符號來傳達物件或概念。不同系統版本中的符號和功能可能會有所不同。請訪問SF Symbols下載應用並瀏覽完整的符號集。在使用 SF Symbols 時，請確保理解使用條款，包括禁止在應用圖示、徽標或任何可能與商標混淆的用途中使用符號或類似影象。
渲染模式
SF Symbols 提供四種渲染模式——單色、分層、調色盤和多色——讓您在符號應用顏色時有更多選擇。例如，您可以使用應用的強調色的不同透明度來為符號增添深度和重點，或指定一組對比顏色以使符號與不同的顏色方案協調。
為了支援這些渲染模式，SF Symbols 將符號的路徑分成不同的圖層。例如，cloud.sun.rain.fill符號包含三個圖層：
- 主層包含雲的路徑。
- 次層包含定義太陽及其光芒的路徑。
- 第三層包含雨滴的路徑。
每個渲染模式會呈現不同的視覺效果。例如，分層渲染模式為每個圖層指定不同的單色透明度，建立一種層次感，使符號具有深度。
SF Symbols 支援的渲染模式包括：
- 單色模式：應用單一顏色到符號的所有圖層。每個符號中的路徑可以呈現為指定的顏色或在充滿顏色的路徑中顯示透明形狀。
- 分層模式：應用單一顏色到符號的所有圖層，但根據圖層的層次等級不同，顏色的透明度也會不同，以體現視覺層次。
- 調色盤模式：對符號的圖層應用兩種或更多顏色。指定兩種顏色時，符號中的次層和第三層將使用相同的顏色。
- 多色模式：為符號應用內在顏色，以增強其含義。例如，葉子符號使用綠色來反映真實世界中的葉子，符號使用紅色來表示資料丟失。
無論使用哪種渲染模式，使用系統提供的顏色都可以確保符號自動適應輔助功能設定和外觀模式，如活力效果和深色模式。
可變顏色（Variable Color）
透過可變顏色，您可以根據數值變化（例如容量或強度）來動態表示特性，而不受渲染模式的影響。可變顏色在符號的不同圖層上應用不同的顏色，當值達到特定閾值時，視覺上會反映這一變化。
在無聲的情況下，波浪圖層不顯示顏色。而當聲音達到某個閾值時，波浪圖層將獲得顏色，這個閾值是根據您想要代表的非零狀態數量由系統定義的。
有時，符號的某些圖層可以選擇不使用可變顏色。比如在speaker.wave.3符號中，包含揚聲器的圖層就不適用可變顏色，因為揚聲器本身不會隨著聲音變化。
使用可變顏色傳達變化，不要用它來傳達深度。要傳達深度和視覺層次感，建議使用分層渲染模式，以區分前景和背景元素。
權重和比例（Weights and Scales）
SF Symbols提供從超細到粗黑的九種符號權重，與San Francisco系統字型的權重一一對應，幫助符號和相鄰文字在權重上精確匹配，同時支援不同尺寸和上下文的靈活性。
每個符號也有三種比例：小（Small）、中（Medium，預設）和大（Large）。這些比例是根據San Francisco系統字型的字母高度相對定義的。
設計變體 (Design Variants)
SF Symbols定義了多種設計變體，例如填充 (fill)、斜線 (slash) 和封閉 (enclosed)，幫助您在介面中傳達精確的狀態和操作，同時保持視覺一致性和簡潔性。例如，您可以使用斜線變體來表示某個專案或操作不可用，或使用填充變體來指示選中狀態。
輪廓 (Outline)是SF Symbols中最常見的變體。這種符號沒有填充區域，類似於文字的外觀。
大多數符號也提供填充變體，在這些變體中，一些形狀的內部區域是實心的。
除了輪廓和填充，SF Symbols還定義了包括斜線或將符號封閉在圓形、方形或矩形中的變體。許多情況下，封閉和斜線變體可以與輪廓或填充變體結合使用。
圖示說明了多種符號變體：心形、心形斜線、封閉的心形等。
SF Symbols提供了針對特定語言和書寫系統的許多變體，包括拉丁文、阿拉伯文、希伯來文、日文、韓文、泰文、印地文等。基於裝置語言的變化，語言和指令碼特定的變體會自動調整。
符號變體支援的設計目標：
輪廓變體非常適合在工具欄、導航欄、列表等與文字並列顯示符號的地方使用。
封閉形狀的符號（如方形或圓形）有助於在較小尺寸下提高可讀性。
填充變體中的實心區域會賦予符號更多的視覺強調，適合在 iOS 的選項卡欄和滑動操作中使用，尤其是在需要透過強調色來傳達選中狀態的地方。
根據檢視自動選擇變體:
通常，顯示符號的檢視會自動選擇是使用輪廓變體還是填充變體。例如，iOS 的選項卡欄通常會優先選擇填充變體，而導航欄則傾向於使用輪廓變體。
這些設計變體使得SF Symbols在不同的場景中可以靈活使用，同時保持視覺一致性和簡潔性。
動畫 (Animations)
SF Symbols提供了多種富有表現力的可配置動畫，增強了介面的活力並提高了符號的可見性。符號動畫幫助傳達想法、提供反饋並在必要時顯示狀態或活動。動畫適用於各種符號樣式和功能，包括權重、比例等。
您可以將SF Symbols中的動畫應用到不同的層、使用渲染模式和調整比例等方式。透過簡單的幾步，您可以自定義符號動畫，甚至為符號建立複雜的動畫組合。對於自定義動畫符號，開發者可以透過Core Animation或SpriteKit來實現更豐富的動畫效果。有關開發者指南，請參閱Symbol animations和SymbolEffect。
支援的動畫型別
出現 (Appear)— 讓符號逐漸顯現出來。示例：無線電波、圖片框架符號等。
消失 (Disappear)— 讓符號逐漸消失不見。示例：新增符號、雙手離開符號等。
彈跳 (Bounce)— 彈性縮放符號，類似於向上或向下彈回到原始尺寸。彈跳動畫可以傳達某個操作即將發生，或表示提醒。示例：笑臉符號、哈哈符號等。
脈衝 (Pulse)— 讓符號的透明度隨時間波動。這種動畫通常用於突顯某個符號或建立節奏感。示例：播放按鈕、暫停符號等。
變數顏色 (Variable Color)— 隨著動畫的進展，逐漸改變符號中不同圖層的顏色。可以用來傳達狀態變化，比如載入進度。示例：下載符號、麥克風圖示等。
魔法替換 (Magic Replace)— 這種動畫在符號之間建立順滑的過渡，逐步替換相關符號。常用於切換符號時，維持視覺連續性。示例：從播放按鈕到暫停按鈕的過渡。
呼吸 (Breathe)— 縮放符號，給人一種脈動感。可以用於表示活動或狀態變化。示例：通知符號、揚聲器圖示等。
旋轉 (Rotate)— 旋轉符號以指示進度，或指示正在發生某些活動。例如：載入過程中的齒輪圖示或旋轉的按鈕。示例：齒輪符號、載入圈符號等。
最佳實踐
合理使用符號動畫。不要為動畫而動畫，過多的動畫會讓使用者感到疲憊或困惑。
確保動畫具備明確的目的。動畫應該傳達清晰的含義，比如操作完成、狀態更新等。
使用動畫傳達重要資訊。在特定的上下文中，動畫可以讓使用者理解介面中的變化。
Custom symbols 自定義符號
如果SF Symbols未提供你所需要的符號，你可以建立自己的自定義符號。建立自定義符號的過程包括修改現有模板或從頭開始使用向量編輯工具進行設計。以下是建立自定義符號並將其整合到應用程式中的步驟和最佳實踐：
建立自定義符號的步驟
匯出模板：首先，從SF Symbols中匯出一個與你想要的設計相似的符號模板，這樣可以確保你保持設計的一致性。
修改模板：使用向量編輯工具（如 Sketch、Illustrator 或 Figma）根據設計需求修改符號。
為圖層註釋：自定義符號可以包含多個圖層。你可以為每個圖層分配層次級別，例如主層、次層或第三層。這對於支援不同的渲染模式（如分層渲染或調色盤模式）尤其重要。確保正確地註釋圖層，以確保符號在不同模式下能正確渲染，並支援動畫效果。
建立自定義符號的最佳實踐
一致性：保持與系統提供的符號在細節、光學重量、對齊、位置和透視上的一致性。自定義符號應無縫融入系統的視覺語言。
簡潔性：符號設計應保持簡潔明瞭，避免過度複雜化，確保符號在小尺寸下仍然清晰可辨。
可識別性：確保自定義符號能夠清楚地表示相關的動作或內容。符號應易於理解和直觀。
包容性：考慮到多樣化的使用者，避免設計出可能被視為排他性或帶有文化偏見的符號。
使用負邊距：某些包含徽章或額外元素（如帶有加號的資料夾符號）的符號可能比其他符號更寬。為了保持這些符號在集合中的水平對齊，SF Symbols支援使用負邊距。例如，這可以幫助導航欄或工具欄中的符號保持一致的水平對齊。
為動畫最佳化圖層：如果你計劃為自定義符號新增動畫，確保符號中的每個圖層都是獨立的，以便可以分別進行動畫處理。圖層的 Z 軸順序會影響動畫的呈現方式，無論是從前到後還是從後到前。例如，如果你建立一個類似於多人物圖示的符號，請將每個人設計為單獨的圖形，以確保動畫流暢。
在SF Symbols 5中，你還可以將相關的圖層分組，以確保在動畫過程中這些圖層一起移動。
測試自定義符號的動畫效果：測試自定義符號的動畫效果非常重要，尤其是在圖層運動時。由於形狀和路徑在動畫中的表現可能與你預期不同，因此建議在設計符號時使用完整的圖形。例如，對於類似於person.2.fill符號的自定義符號，不必為左側人物的形狀建立切口，而是可以畫出完整的形狀，併為右側人物畫出偏移路徑以表示它們之間的間隙。稍後可以將該偏移路徑標註為擦除層，以便按照預期方式渲染符號。此方法有助於保留額外的圖層資訊，從而使動畫按預期執行。
常用變體：避免建立包含常見變體（如包圍框或徽章）的自定義符號，因為SF Symbols中已提供這些元件庫。使用元件庫可以為你的自定義符號新增常用的變體，同時保持設計的一致性。
無障礙考慮：對於你建立的每一個自定義符號，務必提供替代文字標籤（或無障礙描述）。替代文字標籤使得VoiceOver能夠描述可見的 UI 和內容，幫助視力障礙使用者更輕鬆地導航。例如，避免僅描述為“圖示”，而應明確描述其動作或含義，如“播放按鈕”或“設定齒輪”。
蘋果產品符號的限制：自定義符號不能複製或表示蘋果產品（如 iPhone、Mac 或 AirPods），這些產品是受版權保護的。此外，任何SF Symbols中標識為代表蘋果產品或功能的符號也不可自定義。SF Symbols應用會用資訊圖示標記這些不可自定義的符號，並在檢查面板中說明其使用限制。